<template>
  <view>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <tn-navbar>商户充值查询</tn-navbar>
        <tn-input v-model="inputValue" placeholder="请输入商户名称">
          <template #suffix>
            <view class="tn-ml tn-mr" @click="filterData">
              <tn-icon name="search" color=" tn-gray_bg"></tn-icon>
            </view>
          </template>
        </tn-input>
      </template>
      <view class=" ">
        <!-- 账户总金额 -->
        <view
          class="sum tn-gradient-bg__cool-10 tn-white_text tn-m-sm tn-shadow-md tn-flex tn-flex-column tn-align-center">
          <view class="tn-text-lg tn-text-bold tn-text-center">账单统计</view>
          <view class="tn-text-2xl tn-text-bold">
            <text>12,812.08</text>
          </view>
          <view class="tn-flex tn-justify-between tn-w-full tn-mt">
            <view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
              <view class="tn-text-md">应收金额</view>
              <view class="tn-text-lg tn-text-bold">20,362</view>
            </view>

            <view class="tn-flex-1 tn-flex tn-flex-column tn-align-center">
              <view class="tn-text-md">实收金额</view>
              <view class="tn-text-lg tn-text-bold">206</view>
            </view>
          </view>
        </view>
        <!-- 账单记录 -->
        <view class="tn-shadow-md">
          <view class="tn-mt-sm tn-p-sm">
            <tn-title
              title="账单记录"
              mode="vLine"
              assist-color="tn-blue"
              size="lg" />
          </view>
          <block v-for="(item, index) in dataList" :key="index">
            <view class="tn-shadow-md tn-radius tn-m-sm">
              <view class="tn-flex tn-flex-column tn-p-sm">
                <view class="tn-flex tn-align-center justify-between">
                  <view class="tn-flex justify-start">
                    <view class="tn-text-lg">
                      <tn-icon :name="item.avatar" color="tn-blue" size="60" />
                    </view>
                    <view class="tn-p-xs tn-text-lg">
                      <text class="  ">{{ item.title }}</text>
                    </view>
                  </view>
                  <view class="tn-text-md tn-text-bold tn-p-xs ">
                    <text class="tn-ml-xs  ">￥{{ item.money }}</text>
                  </view>
                </view>
                <view class="tn-flex tn-align-center justify-between tn-mt-sm">
                  <view>
                    <text class="tn-ml-xs tn-gray_text">{{ item.time }}</text>
                  </view>
                  <view class="  ">
                    <text class="tn-ml-xs tn-gray_text">{{ item.type }}</text>
                  </view>
                </view>
              </view>
            </view>

            <!-- <view class="tn-shadow tn-p-sm">
              <view class="tn-flex justify-between ">
              

               
                <view class="tn-text-md tn-text-bold">
                  <tn-icon :name="item.avatar" color="tn-orange" size="60" />
                  {{ item.title }}
                </view>
                <view class="tn-text-md tn-text-bold">
                  {{ item.money }}
                </view>
              </view>
              <view class="tn-flex justify-between ">
                <view class="tn-mt-sm tn-text-sm tn-gray_text">
                    {{ item.time }}
                  </view>
                <view class="tn-mt-sm tn-text-sm tn-gray_text">
                  {{ item.type }}
                </view>
              </view>
            
            </view> -->
          </block>
        </view>
        <view class="tn-tabbar-height"></view>
      </view>
    </z-paging>
  </view>
</template>

<script setup lang="ts">
import box from "@/components/global-box/index.vue";
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// ===============模拟数据 =========================

// 模拟数据
const tempList = ref([]);

// z-paging 示例
const paging = ref(null);
// 数据列表
const dataList = ref();

const queryList = (pageNo, pageSize) => {
  // 模拟数据

  for (let i = 0; i < 10; i++) {
    tempList.value.push({
      id: i,
      avatar:
        "https://oss.zhengyikeji.cn/5d636c0b3fadb0b525dd42011b5071be592f59fe93444b124a82143ef81b0020.png",
      title: "商户" + i,
      type: "充值",
      money: "129.68",
      state: 1,
      time: "2023-09-22 20:06",
    });
  }
  paging.value.complete(tempList.value);
};

// ===========================================
</script>

<style lang="scss" scoped>
/* 移除了自定义样式，使用tnV3的样式 */
.sum {
  border-radius: 15rpx;
  // margin-top: 90rpx;
  padding: 50rpx 0 30rpx 20rpx;
  text-align: center;
}

.billList {
  margin: 50rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tn-tabbar-height {
  min-height: 80rpx;
  height: calc(80rpx + env(safe-area-inset-bottom) / 2);
  height: calc(80rpx + constant(safe-area-inset-bottom));
}
</style>
